<template>
	<!-- 选煤厂 -->
	<view class="p-10">
		<u-sticky>
			<view class="bg-white p-5">
				<u-tabs class="top" lineColor="#2172FC" :current="currentKey" :list="[{name: '破碎站'},{name: '皮带运输机'},{name: '振动筛'}]" lineWidth="60" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}"
					@change="selectChange"></u-tabs>
			</view>
		</u-sticky>
		<view class="p-10 m-t-10 bg-white">
			<!-- 破碎站 -->
			<template v-if="currentKey == 0">
				<u-tabs lineColor="#2172FC" :current="currentKey1" :list="[{name: '1#破碎站'},{name: '2#破碎站'}]" lineWidth="60" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @change="selectChange"></u-tabs>
				<my-grid class="m-t-10" :list="list" :decimals="2"></my-grid>
				<u-line class="m-t-20"></u-line>
				<up-text class="m-t-20" text="1#破碎机" :bold="true" color="#333333" size="16"></up-text>
				<up-text class="m-t-10" text="运行参数" :bold="true" color="#555D6F" size="14"></up-text>
				<my-grid class="m-t-10" :list="list1" :decimals="2"></my-grid>
				<up-text class="m-t-10" text="保护信号" :bold="true" color="#555D6F" size="14"></up-text>
				<view class="flex m-t-10">
					<view class="flex  s-center m-r-10" v-for="(item,index) in list2">
						<text class="m-r-5">{{item.name}}</text>
						<text class="dot"></text>
					</view>
				</view>
				<u-line class="m-t-20"></u-line>
				<up-text class="m-t-20" text="2#破碎机" :bold="true" color="#333333" size="16"></up-text>
				<up-text class="m-t-10" text="运行参数" :bold="true" color="#555D6F" size="14"></up-text>
				<my-grid class="m-t-10" :list="list1" :decimals="2"></my-grid>
				<up-text class="m-t-10" text="保护信号" :bold="true" color="#555D6F" size="14"></up-text>
				<view class="flex m-t-10">
					<view class="flex  s-center m-r-10" v-for="(item,index) in list2">
						<text class="m-r-5">{{item.name}}</text>
						<text class="dot"></text>
					</view>
				</view>
			</template>
			<template v-else-if="currentKey == 1">
				<!-- 皮带运输 -->
				<u-collapse :value="showMoreKeys" ref="collapse">
					<u-collapse-item name="1" class="m-t-10 bg-white">
						<template #title>
							<view class="content-item-title"><text class="title-txt m-r-10">皮带名称</text><up-text text="在线" :bold="true" color="#27B77E" size="16"></up-text></view>
						</template>
						<up-text class="m-t-10" text="运行参数" :bold="true" color="#555D6F" size="14"></up-text>
						<my-grid class="m-t-10" :list="beltList" :decimals="2"></my-grid>
						<up-text class="m-t-10" text="保护信号" :bold="true" color="#555D6F" size="14"></up-text>
						<view class="flex  m-t-10" style="flex-wrap: wrap;">
							<view class="flex s-center m-t-5 m-r-10" style="flex: 1;" v-for="(item,index) in beltList1">
								<text class="m-r-5" style="width: 70rpx;">{{item.name}}</text>
								<text class="dot"></text>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</template>
			<template v-else>
				<!-- 振动筛 -->
				<u-collapse :value="showMoreKeys" ref="collapse">
					<u-collapse-item name="1" class="m-t-10 bg-white">
						<template #title>
							<view class="content-item-title"><text class="title-txt m-r-10">振动筛1</text><up-text text="在线" :bold="true" color="#27B77E" size="16"></up-text></view>
						</template>
						<my-grid :list="vibrateList" :decimals="2"></my-grid>
					</u-collapse-item>
					<u-collapse-item name="1" class="m-t-10 bg-white">
						<template #title>
							<view class="content-item-title"><text class="title-txt m-r-10">振动筛2</text><up-text text="在线" :bold="true" color="#27B77E" size="16"></up-text></view>
						</template>
						<my-grid :list="vibrateList" :decimals="2"></my-grid>
					</u-collapse-item>
					<u-collapse-item name="1" class="m-t-10 bg-white">
						<template #title>
							<view class="content-item-title"><text class="title-txt m-r-10">振动筛3</text><up-text text="在线" :bold="true" color="#27B77E" size="16"></up-text></view>
						</template>
						<my-grid :list="vibrateList" :decimals="2"></my-grid>
					</u-collapse-item>
					<u-collapse-item name="1" class="m-t-10 bg-white">
						<template #title>
							<view class="content-item-title"><text class="title-txt m-r-10">振动筛4</text><up-text text="在线" :bold="true" color="#27B77E" size="16"></up-text></view>
						</template>
						<my-grid :list="vibrateList" :decimals="2"></my-grid>
					</u-collapse-item>
				</u-collapse>
			</template>
		</view>
	</view>
</template>

<script setup>
	let currentKey = ref(0),
		currentKey1 = ref(0),
		showMoreKeys = ref([1]),
		list = ref([{
			title: '运行状态',
			value: '在线',
			color: '#27B77E'
		}, {
			title: '电流',
			value: '3.5',
			unit: 'A'
		}, {
			title: '温度',
			value: '68',
			unit: '℃'
		}, {
			title: '压力',
			value: '22.56',
			unit: 'kpa'
		}, {
			title: '油位',
			value: '28.7',
			unit: 'L'
		}]),
		list1 = ref([{
			title: '运行状态',
			value: '在线',
			color: '#27B77E'
		}, {
			title: '功率',
			value: '68',
			unit: 'KW'
		}, {
			title: '生产能力',
			value: '68',
			unit: 't/h'
		}, {
			title: '入料粒度',
			value: '22',
			unit: 'mm'
		}, {
			title: '出料粒度',
			value: '50',
			unit: 'mm'
		}, {
			title: '电流',
			value: '8.7',
			unit: 'A'
		}]),
		list2 = ref([{
			name: '断电',
			status: '0'
		}, {
			name: '过载',
			status: '0'
		}, {
			name: '时速',
			status: '0'
		}, {
			name: '堵料',
			status: '0'
		}, {
			name: '卡料反转',
			status: '0'
		}]),
		beltList = ref([{
			title: '带速',
			value: '2.8',
			unit: 'm/s'
		}, {
			title: '长度',
			value: '68',
			unit: 'm'
		}, {
			title: '宽度',
			value: '68',
			unit: 'm'
		}, {
			title: '输送能力',
			value: '22',
			unit: 't/h'
		}, {
			title: '振动',
			value: '0.1',
			unit: 'mm'
		}, {
			title: '电流',
			value: '8.7',
			unit: 'A'
		}, {
			title: '电机功率',
			value: '2.8',
			unit: 'm/s'
		}, {
			title: 'A相温度',
			value: '68',
			unit: '℃'
		}, {
			title: 'B相温度',
			value: '68',
			unit: '℃'
		}, {
			title: 'C相温度',
			value: '22',
			unit: '℃'
		}, {
			title: '轴承温度1',
			value: '28.7',
			unit: '℃'
		}, {
			title: '轴承温度2',
			value: '8.7',
			unit: '℃'
		}]),
		beltList1 = ref([{
			name: '堵料',
			status: '0'
		}, {
			name: '打滑',
			status: '0'
		}, {
			name: '拉绳',
			status: '0'
		}, {
			name: '撕裂',
			status: '0'
		}, {
			name: '跑偏',
			status: '0'
		}, {
			name: '温度',
			status: '0'
		}, {
			name: '烟雾',
			status: '0'
		}, {
			name: '堆煤',
			status: '0'
		}, {
			name: '失速',
			status: '0'
		}]),
		vibrateList = ref([{
			title: '电流',
			value: '2.8',
			unit: 'A'
		}, {
			title: '电压',
			value: '68',
			unit: 'V'
		}, {
			title: '功率',
			value: '68',
			unit: 'KW'
		}, {
			title: '振频',
			value: '730',
			unit: 'r/min'
		}, {
			title: '振幅',
			value: '12',
			unit: 'mm'
		}, ])
	const selectChange = ({
		index
	}) => {
		currentKey.value = index
	}
</script>

<style lang="scss" scoped>
	.top {
		:deep(.uni-scroll-view-content uni-view) {
			flex-grow: 1;
		}
	}

	.dot {
		display: block;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #27B77E;
	}
</style>